<script setup lang="ts">
import { getCurrentInstance, reactive, nextTick } from 'vue'
const { proxy } = getCurrentInstance()

/* ---- */
const side = reactive({
  show: false,
  // ----
  forall: { show: false, text: '' },
  itemId: 0,
  list: [],
  callback: '',
  // ----
  sortTops: []
})

/* ---- */
const open = (opt) => {
  if (opt) {
    for (const key in opt) { side[key] = opt[key] }
  }
  side.show = true
  // ----
  side.sortTops = [0]
  nextTick(() => {
    let curIndex = 0
    side.list.forEach((item, index) => {
      side.sortTops.push(Number(document.querySelector('.scBox_' + Number(index + 1)).offsetTop + 1))
      // ----
      if (Number(item.value) === Number(side.itemId)) curIndex = Number(index + 1)
    })
    // ----
    if (Number(side.itemId) === 0) {
      document.querySelectorAll('.SBB-slide').forEach((item, index) => {
        item.classList.remove('active')
        if (Number(index) === 0) item.classList.add('active')
      })
    }
    // ----
    setTimeout(() => { initScrollUp(curIndex) }, 300)
  })
}
const initScrollUp = (index) => {
  document.querySelector('.SBB-box').scrollTo({
    top: side.sortTops[index],
    behavior: 'smooth'
  })
}
const refreshInfo = (theObj, index, info) => {
  const forIndex = index || 0
  const resData = info || ''
  // ----
  const theEls = document.querySelectorAll(theObj)
  theEls.forEach((item, curIndex) => {
    if (Number(curIndex) === Number(forIndex)) {
      item.classList.add('active')
    } else {
      item.classList.remove('active')
    }
  })
  // ----
  initScrollUp(forIndex)
  // ----
  side.callback && side.callback(resData)
}

/* ---- */
defineExpose({
  open
})
</script>

<template>
  <transition name="fade" v-if="side.show">
    <div class="mescroll-touch SBB-box">
      <div class="SBB-con">
        <div class="SBB-slide scBox_0" @click="refreshInfo('.SBB-slide')" v-if="side.forall.show">
          <div>{{side.forall.text}}</div>
        </div>
        <div v-for="(item, index) in side.list" :class="['SBB-slide', 'scBox_' + Number(index + 1), Number(item.value) === Number(side.itemId) ? 'active' : '']" @click="refreshInfo('.SBB-slide', Number(index + 1), item)">
          <div>{{item.text}}</div>
        </div>
      </div>
    </div>
  </transition>
</template>

<style scoped>
/* ---- */
.SBB-box { height: 100%; overflow-y: auto; }
/* ---- */
.SBB-con { position: relative; padding-bottom: 1rem; margin: -1px 0 0; }
.SBB-con .SBB-slide { position: relative; height: 3.4rem; line-height: 3.4rem; }
.SBB-con .SBB-slide div { position: relative; padding: 0 1rem; height: 100%; z-index: 999; }
.SBB-con .SBB-slide.active { background: #ffffff; color: #ff5722; }
.SBB-con .SBB-slide.active div { background: #ffffff; border-style: solid; border-color: #cccccc; border-width: 1px 0; }
</style>
